<template>
  <div class="header">
    <div class="blog">
      <div class="b-row">
        <div class="grid-content">爱美剧·爱生活，英语学习平台</div>
        <div class="grid-content">
          <span class="grid-item" v-for="(bitem,bindex) in blogList" :key="bindex" @click="goUrl(bindex)">
            {{bitem.text}}<img v-if="bindex <= 2" src="@/images/icon-jian.gif" alt="">
          </span>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="box">
        <div class="logo" @click="goHome">
          <img src="@/images/logo.png" alt="">
        </div>
        <div class="search" >
          <el-input type="text" placeholder="九月电影网" v-model="keywords" size="small" clearable><i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i></el-input>
        </div>
      </div>
      <div class="sub">
        <span @click="goBottom">好剧排行榜</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      blogList: [
        {text: '电影大全'},
        {text: '电视剧'},
        {text: '收藏本页'}
      ],
      keywords: ''
    }
  },
  methods: {
    goHome () {
      this.$router.push('/')
    },
    goUrl (id) {
      switch (id) {
        case 0:
          let routeUrl = this.$router.resolve({
            path: '/category',
            query: {id: 1, index: 1}
          })
          window.open(routeUrl.href, '_blank')
          break
        case 1:
          let routeUr = this.$router.resolve({
            path: '/category',
            query: {id: 2, index: 2}
          })
          window.open(routeUr.href, '_blank')
          break
        case 2:
          alert('请使用Ctrl+D进行添加')
          break
      }
    },
    goBottom () {
      window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.clientHeight)
    },
    search () {
      // this.$router.push({path: 'category',query:{keyword:this.keywords}})
      let routeUrl = this.$router.resolve({
        path: 'category',
        query: {keyword: this.keywords}
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
  .header {
    .blog {
      height: 30px;
      background: #f7f7f7;
      border-bottom: 1px solid #c7c7c7;
      box-sizing: border-box;
      .b-row {
        width: 980px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .grid-content {
          line-height: 30px;
          color: #666;
          cursor: pointer;
        }
        .grid-item {
          padding: 0 6px;
          border-right: 1px solid #c7c7c7;
          img {
            vertical-align: baseline;
          }
        }
        .grid-item:last-of-type {
          border-right: none;
        }
      }
    }

    .wrap {
      padding: 10px 0;
      width: 980px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo {
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
    /deep/ .box .el-input__inner {
      height: 30px;
      line-grid-progression: 30px;
    }

    .sub{
      & > span{
        padding-left: 10px;
        color: #444;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
</style>
